How To Create Horizontal Form Using CSS Within A Minute?

August 24th, 2016 | by Ravi Chahar || 2 Comments |

There are many bloggers, web designers and developers seeking for the right code to display form fields horizontally. When you build a website and want to show the form input fields inline then it is necessary to have a little bit of knowledge about the CSS.

There are many methods which can help you to do this job. But here, I am going to let you know how to create horizontal form using CSS and HTML. If you are a newbie in the field of web development and designing then it would be better to learn both the languages.

How To Create Horizontal Form In CSS?

You just have to create the form field using the HTML and the set the display property using the CSS. If you are using the WordPress form which can be called just by a simple WordPress function using the PHP.

If you are creating a form for the newsletter box or anything else to show on your website then you can create it using the HTML. I have encountered the problem that sometimes the inline CSS property doesn’t work to show the form fields horizontally.

In this post, I am going to show you the creating of the form and will set it horizontally.

Create form using HTML.

In the above form I have created the name field, email address field, and subscribe button. To generate the form for your email providers, you have copy the form code from their source.

The form action and the validation will depend on that code. It is the simple form using the HTML to show you the proper method to display form fields,

You have created the form but how would you show it horizontally. I am going to provide just a simple one line code which would work for you.

The CSS code is:-

This lines will adjust the form fields in a line and now you can design the fields using other CSS properties like padding, margin, color, background-color.

The first line is used to remove the bullets of the unordered list.

It’s rare to use the <ul> tag of the HTML in the form creation. But this would work perfectly if your input fields are not accepting other codes to align in one line.

I have set the property to the “inline-block” which will give you the freedom the adjust the padding and margin without altering any other design.

If your form fields go outside the form box the set the box-sizing property. It won’t let your form fields to overflow from the box. Set:-

Are you Going to Use This Method To Display Form Fields Horizontally?

Well, it depends on your choice whether you want to show the input items as the list items or set a label for them. You know that there are many ways to reach the final destination. You can set the display property for the input fields as “inline”.

You can float the input items and adjust the position using the margin. But all codes don’t work for everyone. So, I have provided the simplest working method to create a horizontal form in CSS. If you still face any problem then feel free to ask.